<template>
    <el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' :append-to-body="true" class="equiptempDialog" :closeOnClickModal='false'>
        <span slot="title" class="dialog-title">
            温湿度
            <el-button size="mini" @click="close" class="popupClose">关闭</el-button>
        </span>

        <div class="tempCon" style="height:100%;width:100%;">
            起止时间
            <el-date-picker size="mini" v-model="datetime" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" @change="readEuitpmentTemp" style="margin-left:10px">
            </el-date-picker>
            <div class="inlineblock verticalmiddle searchIcon" style="margin-left:15px;">
                <el-button size="mini" @click="readEuitpmentTemp">搜索</el-button>
            </div>
            <div id="tempLine" style="height:calc(100% - 80px);width:100%;margin-top:20px;"></div>
        </div>

    </el-dialog>
</template>

<script>
import {
    mapState
} from 'vuex'
export default {
    data() {
        var that = this;
        return {
            // datetime: [this.util.date() + " " + "00:00:00",  this.util.date() + " " + "23:59:59"],
            datetime: [],
            equipTemp: {},

        }
    },
    computed: {
        ...mapState(['typeQcSelect']),
        sampleTableHeight() {
            return ((window.innerHeight - 310))
        },
    },
    components: {

    },
    props: ['addVisible', 'equipmentId', "rowTime"],
    mounted() {
        this.$store.dispatch('dogetDictionary')
    },
    watch: {
        addVisible(val, oldVal) {
            if (val) {
                console.log(this.rowTime)
                this.datetime = [];
                if (this.rowTime.startDate == undefined || this.rowTime.startDate == null || this.rowTime.startDate == "") {
                    this.datetime[0] = this.util.date() + " " + "00:00:00";
                } else {
                    this.datetime[0] = this.rowTime.startDate + ":00"
                }
                if (this.rowTime.endDate == undefined || this.rowTime.endDate == null || this.rowTime.endDate == "") {
                    this.datetime[1] = this.util.date() + " " + "23:59:59";
                } else {
                    this.datetime[1] = this.rowTime.endDate + ":00"
                }
                this.readEuitpmentTemp();
            }
        }
    },
    methods: {
        readEuitpmentTemp() {
            console.log(this.datetime)
            var data = {
                id: this.equipmentId,
                // id:this.rowTime.fRef,
                // id: "C020002001SGDB1B10",
                beginTime: this.datetime[0],
                endTime: this.datetime[1],
            }
            this.$http({
                method: 'post',
                apiUrl: '/temp/readEuitpmentTemp.htm',
                params: data,
                isJson: false,
            }).then(res => {
                if (res.code === 0) {
                    this.equipTemp = res.data;
                    this.drawLine(res.data);
                }
            })
        },
        drawLine(data) {
            var time = [];
            var humEnvList = []; //环境湿度
            var humEquipList = []; //仪器湿度
            var tempEnvList = []; //环境温度
            var tempEquipList = [];//环境温度

            var humEnvLineMax; //环境湿度最大值
            var humEnvLineMin;//环境湿度最小值

            var tempEnvLineMax; //环境温度最大值
            var tempEnvLineMin;//环境温度最小值

            var humEquipLineMax; //仪器湿度最大值
            var humEquipLineMin;//仪器湿度最小值


            var tempEquipLineMax; //仪器温度最大值
            var tempEquipLineMin;//仪器温度最小值



            for (var i in data) {
                time.push(i.split('.')[0])

                tempEquipList.push(data[i][0].tempEquip);  //仪器温度
                tempEquipLineMax = data[i][0].tempEquipMax; //仪器温度的最大值
                tempEquipLineMin = data[i][0].tempEquipMin; //仪器温度的最小值

                tempEnvList.push(data[i][0].tempEnv) //环境温度
                tempEnvLineMax = data[i][0].tempEnvMax; //环境温度的最大值
                tempEnvLineMin = data[i][0].tempEnvMin; //环境温度的最小值

                humEquipList.push(data[i][0].humEquip) //环境温度
                humEquipLineMax = data[i][0].humEquipMax; //环境温度的最大值
                humEquipLineMin = data[i][0].humEquipMin; //环境温度的最小值

                humEnvList.push(data[i][0].humEnv) //环境温度
                humEnvLineMax = data[i][0].humEnvMax; //环境温度的最大值
                humEnvLineMin = data[i][0].humEnvMin; //环境温度的最小值

            }
            // console.log(time, tempEquipList, tempEquipLineMax, tempEquipLineMin, humEnvList, humEnvLineMax, humEnvLineMin)


            let tempLine = this.$echarts.init(document.getElementById('tempLine'));
            // 绘制图表
            // var arr = data;
            tempLine.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: "line"
                    }
                },
                legend: {
                    data: ['环境湿度', '环境温度', '仪器湿度', '仪器温度']
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: {//axisLine决定是否显示坐标刻度
                        show: true
                    },
                    data: time.map(function(str) {
                        return str.replace(' ', '\n')
                    }),
                },
                yAxis: [
                    {
                        name: '温度',
                        type: 'value',
                        max: 60,
                        min: -40,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} °C'
                        },
                    },
                    {
                        name: '湿度',
                        max: 100,
                        min: 0,
                        type: 'value',
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                    }
                ],
                series: [
                    {
                        name: '环境湿度',
                        type: 'line',
                        yAxisIndex: 1,
                        itemStyle: {
                            normal: {
                                color: "#1bdaf8",
                                lineStyle: {
                                    color: "#1bdaf8" //折线的颜色
                                }
                            }
                        },
                        data: humEnvList,
                        markPoint: {
                            symbol:'circle',
                            symbolSize:8,
                            data: [
                                {
                                        coord:  [time.length - 1, humEnvLineMax],
                                        label: {
                                            normal: {
                                                position: 'insideLeft',
                                                formatter: "环境湿度最大值(" + humEnvLineMax + "℃)",
                                                distance:10,
                                                color: "#1bdaf8",
                                            }
                                        }
                                },
                                {
                                    coord:  [time.length - 1, humEnvLineMin],
                                    label: {
                                        show: true,
                                        formatter: '环境湿度最小值(' + humEnvLineMin + "℃)",
                                        position:'insideLeft',
                                        distance:10,
                                        color: "#1bdaf8",
                                    },
                                },
                            ]
                        },

                    },
                    {
                        name: '环境温度',
                        type: 'line',
                        data: tempEnvList,
                        markPoint: {
                            symbol:'circle',
                            symbolSize:8,
                            data: [
                                {
                                    coord: [0, tempEnvLineMax],
                                    label: {
                                        normal: {
                                            position: 'insideRight',
                                            formatter: "环境温度最大值(" + tempEnvLineMax + "℃)",
                                            distance:10,
                                            color:"#c33834",
                                        }
                                    }
                                },
                                {
                                    coord: [0, tempEnvLineMin],
                                    label: {
                                        show: true,
                                        formatter: '环境温度最小值(' + tempEnvLineMin + "℃)",
                                        position:'insideRight',
                                        distance:10,
                                        color:"#c33834",

                                    },
                                },
                            ]
                        },
                    },
                    {
                        name: '仪器湿度',
                        type: 'line',
                        yAxisIndex: 1,
                        data: humEquipList,
                        markPoint: {
                            symbol:'circle',
                            symbolSize:8,
                            data: [
                                {
                                        coord: [time.length - 1, humEquipLineMax],
                                        label: {
                                            normal: {
                                                position: 'insideLeft',
                                                formatter: "仪器湿度最大值(" + humEquipLineMax + "℃)",
                                                distance:10,
                                                color:"#939fa7",
                                            }
                                        }
                                },
                                {
                                    coord: [time.length - 1, humEquipLineMin],
                                    label: {
                                        show: true,
                                        formatter: '仪器湿度最小值(' + humEquipLineMin + "℃)",
                                        position:'insideLeft',
                                        distance:10,
                                        color:"#939fa7",
                                    },
                                },
                            ]
                        },
                    },
                    {
                        name: '仪器温度',
                        type: 'line',
                        data: tempEquipList,
                        markPoint: {
                            symbol:'circle',
                            symbolSize:8,
                            data: [
                                {
                                    coord: [0, tempEquipLineMax],
                                    label: {
                                        normal: {
                                            position: 'insideRight',
                                            formatter: "仪器温度最大值(" + tempEquipLineMax + "℃)",
                                            distance:10,
                                            color:"#61a0a8",
                                        }
                                    }
                                },
                                {
                                    coord: [0, tempEquipLineMin],
                                    label: {
                                        show: true,
                                        formatter: '仪器温度最小值(' + tempEquipLineMin + "℃)",
                                        position:'insideRight',
                                        distance:10,
                                        color:"#61a0a8",
                                    },
                                },


                            ]
                        },
                    },
                ]
            })

        },


        //关闭
        close(formName) {
            // this.datetime = [];
            this.$emit('update:addVisible', false);

        },

    }
}
</script>

<style scoped>

</style>
<style>
.equiptempDialog .el-dialog {
    margin-top: 10vh !important;
    height: 80% !important;
}

.equiptempDialog .el-dialog__body {
    height: calc(100% - 30px);
    overflow-y: auto;
}

.equiptempDialog .el-dialog .el-dialog__body {
    height: calc(100% - 45px);
    padding: 10px;
    overflow-y: auto;
}
</style>
